<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <script src="{{ url_for('static',filename='jquery.js') }}"></script>
		<script src="../static/three.js"></script>
	</head>
	<body>
		<div class="canvas-container">
			<canvas id="myCanvas"></canvas>
		</div>
		<script>
			// 创建场景、相机和渲染器
			var flightVgx=0;
			var flightVgy=0;
			var flightH=0;
			var flightYaw=0;
			var heading=0;
			var scene = new THREE.Scene();

			//var renderer = new THREE.WebGLRenderer();
			var canvas = document.getElementById('myCanvas');
			var renderer = new THREE.WebGLRenderer({
				canvas: canvas
			});

			renderer.setSize(window.innerWidth, window.innerHeight);
			document.body.appendChild(renderer.domElement);

			// 创建灰白色网格模型
			var grid = new THREE.GridHelper(1000, 100, 0xffffff, 0xffffff);
			scene.add(grid);
			// 创建无人机箭头
			var drone = new THREE.ArrowHelper(new THREE.Vector3(0, 0, -10), new THREE.Vector3(0, 0, 0), 10, 0x0000CD, 4, 2);
			scene.add(drone);

			// 定义无人机初始坐标
			var position = new THREE.Vector3(0, 0, 0);


			// 定义切换相机函数
			var currentCamera = 0;

			function switchCamera() {
				currentCamera++;
				if (currentCamera > 2) {
					currentCamera = 0;
				}
			}

			// 定义键盘按键事件
			var onKeyDown = function(event) {
				switch (event.keyCode) {
					case 81: // Q
						currentCamera++;
						if (currentCamera > 2) {
							currentCamera = 0;
						}
						break;
				}
			};

			// 监听键盘按键事件
			document.addEventListener('keydown', onKeyDown, false);

			// 更新无人机位置和姿态，并绘制轨迹
			function update(position, heading) {
				drone.position.copy(position);
				drone.setDirection(new THREE.Vector3(Math.sin(heading), 0, Math.cos(heading)).normalize());
			}

			// 渲染场景
			function render() {
				var frontCamera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
				frontCamera.position.set(0, 1, 3);
				frontCamera.rotation.y=(heading * Math.PI / 180);
				var backCamera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
				backCamera.position.set(0, 1, -3);
				backCamera.rotation.y = Math.PI+(heading * Math.PI / 180);
				var topCamera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
				topCamera.position.set(0, 15, 0);
				topCamera.rotation.x = -Math.PI / 2;
				// 更新相机位置和旋转
				switch (currentCamera) {
					case 0:
						frontCamera.position.copy(drone.position.clone().add(new THREE.Vector3(30*Math.sin((heading * Math.PI / 180)), 10, 30*Math.cos((heading * Math.PI / 180)))));
						break;
					case 1:
						backCamera.position.copy(drone.position.clone().add(new THREE.Vector3(-30*Math.sin((heading * Math.PI / 180)), 10, -30*Math.cos((heading * Math.PI / 180)))));


						break;
					case 2:
						topCamera.position.copy(new THREE.Vector3(100, 100, 100));
						topCamera.lookAt(0, 0, 0); // 场景中心
						break;
				}
				// 渲染场景
				switch (currentCamera) {
					case 0:
						renderer.render(scene, frontCamera);
						break;
					case 1:
						renderer.render(scene, backCamera);
						break;
					case 2:
						renderer.render(scene, topCamera);
						break;
				}
			}

			// 定义外部接口，接收x、y、z轴信息（单位为米）和偏航角度（单位为角度），并更新无人机位置和姿态
			function updateDronePosition(x,z, y, heading) {
position.set(drone.position.x - x , y,
				 drone.position.z + z);
				update(position, (heading + 180) * Math.PI / 180); // 将角度转换为弧度
			}
			const positionHistory = [];
			var positions = [];
			function line_view() {
				positions.push(drone.position.x);
				positions.push(drone.position.y);
				positions.push(drone.position.z);
				var geometry = new THREE.BufferGeometry();
				geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));

				// var material = new THREE.PointsMaterial({
				// 	color: 0x00FF0000,
				// 	size: 0.5
				// });
				// var points = new THREE.Points(geometry, material);
				 const lineMaterial = new THREE.LineBasicMaterial( { color: 0x00FF0000 ,size: 0.5} );
				 const line = new THREE.Line(geometry, lineMaterial);
				//line.geometry.setDrawRange(0, positions.length);
				scene.add(line);
			}

			// 定时更新场景和渲染器
			setInterval(function() {
				// pathLine = new THREE.Line(pathGeometry, pathMaterial);
				requestAnimationFrame(render);
				//updateDronePosition(0.1, 20, 60); //
				//console.log("in"+flightYaw);
				positions.push(drone.position.x);
				positions.push(drone.position.y);
				positions.push(drone.position.z);
				updateDronePosition(parseInt(flightVgy)/10, parseInt(flightVgx)/10,parseFloat(flightH)/10,-parseFloat(flightYaw));
				line_view();
				//heading=60;
				//console.log(drone.position);
				//console.log(flightYaw);
				render();
			}, 0);

			 $(document).ready(function() {
			  var intervalId = setInterval(function() {
				$.ajax({
				  url: '/send1',
				  success: function(data) {
					flightVgy = data.vgy;
					flightVgx = data.vgx;
					flightH = data.h;
					flightYaw = data.yaw;
				  }

				});

			  }, 1000/30);
			});
		</script>
	</body>
</html>